|
<!--  -->
<template>
  <div>
    <button @click="man">测试子传父</button>
    <button @click="man2">测试兄弟组件</button>

    <div>不是老弟</div>
    <input type="text" />
    <input type="button" value="计算age" @click="addCalculate" />
    <hr />
    <h2>{{ mount }}</h2>
    <input type="button" value="计算个数" @click="calculateMount" />

    <h2>名称：{{ name }}</h2>

    <h2>年龄:{{ age }}</h2>
    <h2>兄弟组件传导过来的值:{{ datas }}</h2>

    <h3 ref="tittle"></h3>
    <button @click="add">点我展示组件</button>

    <!-- <ProductCategory></ProductCategory>
    <ProductCategory /> -->
  </div>
</template>

<script>
//简单声明接收（使用较多）
//  props:['name','address'],

//接收的同时对数据进行类型限制
// props: {
//   name: String,
//   age: Number,
// },

//接收的同时对数据进行类型限制及是否必须、默认值的设置

//消息发布与订阅
import pubsub from "pubsub-js";

export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      default: 99,
    },
    calculate: {
      type: Function,
    },
    tableData: {
      type: Array,
    },
    datas: {
      type: Array,
    },
  },
  mounted() {
    //消息订阅 a消息名称 b数据
    this.pubId = pubsub.subscribe("hello",  (messageNmae, data) =>{
      console.log(
        "有人发布了hello消息，hello消息的回调执行了",
        messageNmae,
        data
      );
      console.log(this)
    });

    //全局事件总线接收数据
    // this.$bus.$on("ss", (data) => {
    //   console.log("Add组件，我收到了数据", data);
    // });
  },
  // 解绑
  beforeDestroy() {
    this.$bus.$off("ss");
    //
    pubsub.unsubscribe(this.pubId);
  },
  created() {
    console.log("addcreate组件");
  },

  name: "add",
  data() {
    return {
      mount: "",
      pai: "3.1415926",
    };
  },

  methods: {
    man2() {
      console.log("add组件进来了", this.datas);
    },
    man() {
      // 触发组件的事
      this.$emit("re", "不是英雄不读三国");
    },
    addCalculate() {
      this.calculate(this.pai);
    },
    add() {
      console.log(this);
      console.log(this.$refs.tittle);
    },

    calculateMount() {
      this.mount = this.tableData.reduce(
        (pre, curent) => (curent.name === "王小虎" ? pre + 1 : pre),
        0
      );
    },
  },
};
</script>
<style scoped></style>
